import React, { PureComponent } from 'react';
import { Card, Button, Table } from 'antd';
import { connect } from 'dva';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import PateoSearchForm from '@/components/common/PateoSearchForm';
import PateoAuthButtons from '@/common/PateoAuthButtons/PateoAuthButtons';
import styles from '@/components/common/PateoTable/TableList.less';
import AddModal from './addModal';
import { PlusOutlined } from '@ant-design/icons';
import MaskText from '@/components/MaskText';

@connect(state => ({
  extendForm: state.extendForm,
  menu: state.menu,
}))
export default class groupManagement extends PureComponent {
  state = {
    visible: false,
    formData: {},
    formValues: {},
    dealerFlag: false,
  };
  componentWillMount() {
    const {
      menu: { userProfile, dataPermission },
    } = this.props;
    console.log('userprofile', userProfile);
    console.log('dataPermission', dataPermission);
    if (dataPermission.PERSON && dataPermission.PERSON.length > 0) {
      if (dataPermission.PERSON[0] == '3') {
        //只有经销商账号有新增按钮  1-运维 2-车厂 3-经销商
        this.setState({ dealerFlag: true });
      }
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'extendForm/fetch',
      payload: { url: '/groupManagement/searchPage' },
    });
  }
  handleRemove = sid => {
    const { dispatch } = this.props;
    dispatch({
      type: 'extendForm/remove',
      payload: { url: '/groupManagement/delete', sid },
    }).then(() => {
      dispatch({ type: 'extendForm/fetch', payload: { url: '/groupManagement/searchPage' } });
    });
  };

  handleTableChange = (pagination, filters) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const current = pagination.current - 1;
    this.setState({ pagination });
    const params = {
      page: current,
      size: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    dispatch({
      type: 'extendForm/fetch',
      payload: { url: '/groupManagement/searchPage', ...params },
    });
  };
  render() {
    const {
      extendForm: {
        loading,
        data: { list, pagination },
      },
      dispatch,
    } = this.props;
    const { formValues, visible, formData } = this.state;
    const formItems = [
      {
        type: 'input',
        title: '集团名称',
        key: 'groupName',
        rules: [{ required: true, message: '请输入集团名称', whitespace: true }],
        maxLength: '30',
      },
      {
        type: 'input',
        title: '法人姓名',
        key: 'legalPersonName',
        rules: [{ required: true, message: '请输入法人姓名', whitespace: true }],
        maxLength: '4',
      },
      {
        type: 'input',
        title: '统一社会信用代码',
        key: 'creditCode',
        rules: [{ required: true, message: '请输入统一社会信用代码', whitespace: true }],
        editDisabled: true,
        maxLength: '30',
      },
      {
        type: 'input',
        title: '联系方式',
        key: 'contactInformation',
        rules: [
          {
            required: true,
            message: '手机号码有误',
            whitespace: true,
            pattern: /^1[0-9][0-9]\d{8}$/,
          },
        ],
      },
      {
        type: 'input',
        title: '联系地址',
        key: 'contactAddress',
        rules: [{ required: false, message: '请输入联系地址', whitespace: true }],
        maxLength: '30',
      },
    ];
    const columns = [
      //   {
      //   title: 'No',
      //   dataIndex: 'num',
      //   render: (text, record, index) => {
      //     const page = pagination;
      //     return index + 1 + ((page.current - 1) * page.pageSize);
      //   },
      // },
      {
        title: '集团名称',
        dataIndex: 'groupName',
      },
      {
        title: '集团编码',
        dataIndex: 'groupCode',
      },
      {
        title: '法人姓名',
        dataIndex: 'legalPersonName',
        render(val) {
          return <MaskText text={val} type="name" />;
        },
      },
      {
        title: '统一社会信用代码',
        dataIndex: 'creditCode',
      },
      {
        title: '联系地址',
        dataIndex: 'contactAddress',
      },
      {
        title: '联系方式',
        dataIndex: 'contactInformation',
        render(val) {
          return <MaskText text={val} type="phone" />;
        },
      },
      {
        title: '操作',
        dataIndex: '操作',
        render: (text, record) => {
          const btns = [
            {
              title: '编辑',
              key: 'edit',
              onConfirm: () => this.setState({ formData: record, visible: true }),
            },
          ];
          return <PateoAuthButtons authStr="groupManagement" btns={btns} />;
        },
      },
    ];
    const searchItems = [
      {
        type: 'input',
        title: <span>集团名称</span>,
        key: 'groupName',
      },
      {
        type: 'input',
        title: <span>法人姓名</span>,
        key: 'legalPersonName',
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };
    return (
      <PageHeaderLayout>
        <div>
          <Card bordered={false}>
            <PateoSearchForm
              searchItems={searchItems}
              fetchParams={{ type: 'extendForm/fetch', url: '/groupManagement/searchPage' }}
              saveFormValues={val => this.setState({ formValues: Object.assign(formValues, val) })}
              handleFormReset={() => this.setState({ formValues: {} })}
            />
          </Card>
          <Card className={styles.standardTable}>
            <div className="my_newItem">
              {this.state.dealerFlag ? (
                <span>
                  <Button
                    icon={<PlusOutlined />}
                    size="small"
                    type="primary"
                    htmlType="submit"
                    className="ant-btn ant-btn-primary"
                    onClick={() => this.setState({ visible: true })}
                  >
                    新增
                  </Button>
                </span>
              ) : null}
            </div>
            <Table
              size={'small'}
              loading={loading}
              rowKey={record => record.sid}
              dataSource={list}
              columns={columns}
              scroll={{ x: 'max-content' }}
              pagination={paginationProps}
              onChange={this.handleTableChange}
            />
            <AddModal
              width={600}
              changeVisible={() => this.setState({ visible: false, formData: {} })} // 取消modal回调
              formItems={formItems} // 表单元素以及配置
              visible={visible} // 控制弹框
              formData={formData} // 表单绑定的数据对象
              updateUrl="/groupManagement/add" // 修改的URL
              addUrl="/groupManagement/add" // 新增的URL
              dispatch={dispatch}
              callBackFetch={() =>
                dispatch({
                  type: 'extendForm/fetch',
                  payload: { url: '/groupManagement/searchPage' },
                })
              } // 刷新回调
            />
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}
